<template>
  <view class="bankmanage-box">
    <view class="tips">*每个账户可以最多绑定5张银行卡</view>
    <view class="" v-if="list.length">
    	<view class="bankmanage-item" v-for="(item,index) in list" :key='index'>
    	  <view class="row1">
    	    <text>{{item.bankName}}</text>
    	    <image @click="deleteOne(item.id)" src="../../../static/delete.png" style="width: 24rpx;height:25rpx;" mode=""></image>
    	  </view>
    	  <view class="row2">
    	    <text>{{item.cardNo.slice(0,4)}}**********{{item.cardNo.slice('6228480088141848874'.length-4,'6228480088141848874'.length)}}</text>
    	  </view>
    	</view>
    </view>
	<view class="nodata flex_center" v-else>
		~暂无数据~
	</view>
    <view class="bottom flex_v_venter" @click="$go('./bankmamage')">
      <text style="font-size: 45rpx;margin: 0 5rpx 0 0;">+</text>
      <text>添加银行卡</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		list:[]
	};
  },
  onShow() {
  	this.getlist()
  },
  methods:{
	  getlist(){
		  this.$ajax('api/Member/QueryBank').then(res => {
		  	this.list = res.Data.list
		  })
	  },
	  deleteOne(id){
		  uni.showModal({
		  	title: '提示',
		  	content: '确定删除？',
		  	showCancel: true,
		  	cancelText: '取消',
		  	confirmText: '确定',
		  	success: er => {
				if(er.confirm){
					this.$ajax('api/Member/DeleteBank',{list:[{id:id}]}).then(res => {
								  if(res.RequestStatus == 204){
									  uni.showToast({
									  	title: '删除成功'
										
									  });
									  this.getlist()
								  }
					})
				}
			},
		  	fail: () => {},
		  	complete: () => {}
		  });
	  }
  }
};
</script>

<style lang="scss">
	.nodata{
	font-size: 25rpx;
	color: #999;
	padding: 200rpx 0;
	}
  .bankmanage-box {
    position: relative;
    height: 100%;
	background: #E8EAEC;
	min-height: 100vh;
    .tips {
      padding-left: 30rpx;
      height: 50rpx;
      background-color: #F3DCBA;
      font-size: 26rpx;
      color: #A77D40;
      line-height: 50rpx;
    }
    .bankmanage-item {
      margin: 0 30rpx;
      border-radius: 26rpx;
      background-color: #fff;
      margin-top: 40rpx;
      margin-bottom: 20rpx;
      padding-top: 30rpx;
      padding-left: 38rpx;
      padding-right: 37rpx;
	  padding-bottom: 30rpx;
      .row1 {
        display: flex;
        justify-content: space-between;
      }
      .row2 {
        margin-top: 28rpx;
      }
    }
    .bottom {
      position: fixed;
      bottom: 0;
      height: 100rpx;
	  width: 100%;
      background-color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
